<template>
  <el-form-item label="区域选择：" :label-width="formLabelWidth" style="width: 100%">
    <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync1" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
    <el-autocomplete v-model="state3" :fetch-suggestions="querySearchAsync2" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
    <el-autocomplete v-model="state2" :fetch-suggestions="querySearchAsync3" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
  </el-form-item>
</template>

<script>
export default {
  props: {
    restaurants1: {
      type: Array,
      default: () => {
        return []
      }
    },
    restaurants2: {
      type: Array,
      default: () => {
        return []
      }
    },
    restaurants3: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      state4: '',
      state3: '',
      state2: '',
      timeout: null,
      formLabelWidth: '120px',
      serial1: 1,
      serial2: 2,
      serial3: 3
    }
  },
  mounted () {
    console.log(this.state4)
  },
  methods: {
    querySearchAsync1 (queryString, cb) {
      var restaurants = this.restaurants1
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      cb(results)
    },
    querySearchAsync2 (queryString, cb) {
      var restaurants = this.restaurants2
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      cb(results)
    },
    querySearchAsync3 (queryString, cb) {
      var restaurants = this.restaurants3
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      cb(results)
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
      this.$emit('getRegionList', item)
    }
  }
}
</script>
<style>
.el-autocomplete-suggestion{
  top: 110px;
  left: 433px;
}
</style>
